<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#00B4AD"
      text-color="#fff"
      active-text-color="#FFFFFF"
      @select="handleSelect"
    >
      <el-menu-item index="1"> <img src="@/assets/logo/icons8-social-network-64.png"> </el-menu-item>
      <el-menu-item index="2" @click="toHome">  基金列表 </el-menu-item>
      <el-menu-item index="5" @click="toCopyright">  声明 </el-menu-item>
    </el-menu>
    <el-main>
      <el-row>
        <el-col :span="22" :offset="1">
        <el-input
            v-model="search"
            @focus="focus"
            @blur="blur"
            @keyup.enter.native="searchHandler"
            placeholder="搜索基金"
          >
          <el-button slot="append" icon="el-icon-search" id="search" @click="searchHandler"></el-button>
        </el-input>
          <el-table
            v-loading="isLoading"
            :data="list"
            border
            style="width: 100%; margin-top: 50px"
          >
            <el-table-column
              prop="fund_id"
              label="基金代号"
              width="220"
            />
            <el-table-column
              prop="fund_cn_name"
              label="基金名"
            />
            <el-table-column
              width="120"
              label=""
            >
            <template slot-scope="{row}">
              <el-button size="mini" @click="handleToCourseHome(row)"> 查看数据 </el-button>
            </template>

            <!--
            </el-table-column>
                        <el-table-column
              width="120"
              label=""
              >
              <template slot-scope="{row}">
                  <el-button size="mini" v-loading="isSyncing" @click="handleSyncData(row)"> 同步数据 </el-button>
              </template>
            </el-table-column>
            -->
          </el-table>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <br>
      <center>
        <el-button v-if="showLoadMore" round @click="loadMore()">加载更多...</el-button>
      </center>
      <br>
      <br>
      <el-divider>jay_jieliu@outlook.com</el-divider>
      <br>
    </el-footer>
  </div>
</template>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    padding: 0;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

<script>
import { fetchList, searchList, syncFundRecordData } from '@/api/fundrecord'
import Cookies from 'js-cookie'
import settings from '@/settings'

const axios = require('axios');

export default {
  name: 'Home',
  props: {
  },
  data() {
    return {
      search: "", //当前输入框的值
      isFocus: false, //是否聚焦
      hotSearchList: ["暂无热门搜索"], //热门搜索数据
      historySearchList: [], //历史搜索数据
      searchList: ["暂无数据"], //搜索返回数据,
      history: false,
      types: ["", "success", "info", "warning", "danger"],
      driver: null,
      activeIndex: '2',
      currentDate: new Date(),
      list: [],
      startIndex: 0,
      endIndex: 0,
      pageItemNumbers: 0,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      isSyncing: false,
      isLoading: false,
      temp: {
        title: ''
      },
      showLoadMore: true
    }
  },
  mounted() {
    this.startIndex = 0
    this.pageItemNumbers = 8
    this.endIndex = this.startIndex + this.pageItemNumbers
    this.getCourseList()
    this.showLoadMore = true
  },
  computed: {
    isHistorySearch() {
      return this.isFocus && !this.search;
    },
    isSearchList() {
      return this.isFocus && this.search;
    },
    isSearch() {
      return this.isFocus;
    }
  },
  methods: {
    focus() {
      this.isFocus = true;
    },
    blur() {
      var self = this;
      this.searchBoxTimeout = setTimeout(function() {
        self.isFocus = false;
      }, 300);
    },
    enterSearchBoxHanlder() {
      clearTimeout(this.searchBoxTimeout);
    },
    searchHandler() {
      let searchKey = ''
      if (this.search === '') {
        searchKey = '0'
      } else {
        searchKey = this.search
      }
      var this_ = this
      this.isLoading = true
      axios.get(settings.baseURL + '/api/fundrecords-search/' + searchKey + '/')
      .then(function (response) {
        console.log(response);
        this_.list = response.data        
        this_.isLoading = false
        this_.showLoadMore = false
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    },
    closeHandler(search) {
      this.historySearchList.splice(this.historySearchList.indexOf(search), 1);
      clearTimeout(this.searchBoxTimeout);
      if (this.historySearchList.length == 0) {
        this.history = false;
      }
    },
    _isMobile() {
      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    },
    login: function() {
      this.$login.login(this)
    },
    getCourseList() {
      var _this = this
      _this.isLoading = true
      axios.get(settings.baseURL + '/api/fundrecords/'+ this.startIndex +'/'+ this.endIndex +'/')
      .then(function (response) {
        console.log(response);
        _this.list = _this.list.concat(response.data)
        _this.isLoading = false
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    },
    loadMore() {
      this.startIndex = this.endIndex + 1
      this.endIndex = this.endIndex + this.pageItemNumbers
      this.getCourseList()
    },
    toCopyright() {
      this.$router.push({
        path: `/copyright`
      })
    },
    toHome() {
      this.$router.push({
        path: `/`
      })
    },
    handleToCourseHome(c) {
      Cookies.set('fund_id', c.fund_id)
      Cookies.set('fund_cn_name', c.fund_cn_name)
      this.$router.push({
        path: `/learn/${c.fund_id}`
      })
    },
    handleSyncData(c) {
      this.isSyncing = true
      let that = this
      syncFundRecordData(c.fund_id).then(response => {
          this.isSyncing = false
      }, function(error) {
          that.isSyncing = false
      })
    }
  }
}
</script>
